<template>
  <div class="shangpinDialog">
    <el-dialog
      title="选择分类"
      :close-on-click-modal="false"
      :visible.sync="dialogTableVisible"
      width="70%">
      <el-row :gutter="20">
        <!--部门数据-->
        <el-col :span="3" :xs="24" style="max-height: 400px;overflow: auto">
          <div class="head-container">
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              default-expand-all
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <el-col :span="21" :xs="24">
          <el-table
            highlight-current-row
            max-height="300"
            @row-click="rowClick"
            v-loading="loading"
            :data="dataList"
            stripe border style="margin-top: 20px"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column  width="35">
              <template slot-scope="scope">
                <el-radio :label="scope.row.code" v-model="radioId">&nbsp;</el-radio>
              </template>
            </el-table-column>
            <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
            <el-table-column align="center" label="分类名称"   property="code"  width="160" ></el-table-column>
            <el-table-column align="center" label="仓库需求数"   property="name"   ></el-table-column>
            <el-table-column align="center" label="预计采购数量（自己计算）"   property="ren"  width="200" ></el-table-column>
            <el-table-column align="center" label="实际采购数量"   property="shouji"   ></el-table-column>
            <el-table-column align="center" label="状态"   property="shouji"   ></el-table-column>
            <el-table-column align="center" label="运营人员"   property="shouji"   ></el-table-column>
            <el-table-column align="center" label="备注"   property="shouji"   ></el-table-column>
          </el-table>
          <el-pagination
            style="margin-top: 20px;text-align: right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            :current-page="queryParams.pageNum"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40">
          </el-pagination>
        </el-col>
      </el-row>




      <div class="pageTop" style="padding:10px;margin-top: 15px;text-align: right">
        <el-button type="primary" size="medium" @click="determine" >确 定</el-button>
        <el-button  size="medium" @click="cancel" >关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  props: ['cgdData'],
  name: "Role",
  data() {
    return {
      radioId:'',
      ckname:'',
      loading:false,
      // 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      dataList:[
        {ckname:'仓库1',code:'CG202011021833047',name:'采购单1',ren:'张三',shouji:'15162063948',id:'1'},
        {ckname:'仓库2',code:'CG202011021833048',name:'采购单2',ren:'张三2',shouji:'15162063948',id:'2'},
        {ckname:'仓库3',code:'CG202011021833049',name:'采购单3',ren:'张三3',shouji:'15162063948',id:'3'},
        {ckname:'仓库4',code:'CG202011021833050',name:'采购单4',ren:'张三4',shouji:'15162063948',id:'4'},
        {ckname:'仓库5',code:'CG202011021833051',name:'采购单5',ren:'张三5',shouji:'15162063948',id:'5'},
      ],
      dialogTableVisible:true,
      queryParams:{
        pageNum:1,
        pageSize:10,
        deptId:'',
        codec:'',
        jhdh:'',
      },
      multipleSelection:[],
    };
  },
  watch: {
    dialogTableVisible: function () {
      this.dialogTableVisible = true;//始终让他为true;
      this.cancel();//隐藏
    },
  },
  created() {
    console.log('接受',this.cgdData)
    this.deptOptions = [
      {
        label: '肉类',
        id:1,
        children: [{
          label: '猪肉',
          id:11
        },{
          label: '羊肉',
          id:12
        }]
      },
      {
        label: '菜类',
        id:2,
        children: [{
          label: '黄瓜',
          id:21
        }, {
          label: '青菜',
          id:22
        }]
      },
      {
        label: '水果',
        id:3,
        children: [{
          label: '西瓜',
          id:31
        }, {
          label: '葡萄',
          id:32
        }]
      }
    ]

  },
  mounted() {

  },
  methods: {
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.label+'-'+data.id;
      console.log('节点单击',this.queryParams.deptId )
      this.getList();
    },
    rowClick(row){
      this.radioId=row.code;
      this.ckname = row.ckname
      console.log('单选',this.radioId)
    },
    //分页查询
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val
      this.getList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val
      this.getList()
    },
    //搜索
    getList:function (){
      console.log('搜一下')

    },
    //确定
    determine:function(){
      var obj={}
      obj.ckname =  this.ckname
      obj.radioId =  this.radioId
      this.$emit('callback',obj)//将submitModel的值传给父组件
    },
    //隐藏
    cancel:function(){
      // this.determine()
      this.$emit('callback','')//将submitModel的值传给父组件
    },

  }
};
</script>
<style scoped>
.shangpinDialog {

}



</style>
